<template>
  <div class="page">
    <van-nav-bar title="我的订单" @click-left="$router.go(-1)">
      <div slot="left" class="f20">
        <van-icon name="wap-home-o" />
      </div>
    </van-nav-bar>
    <van-sticky>
      <div class="content-title flex f14 jc-sa aic">
        <div class="zoom">全部</div>
        <div class="flex aic">待付款</div>
        <div class="flex aic">待发货</div>
        <div class="flex aic">已取消</div>
      </div>
    </van-sticky>
    <div>
      <van-cell-group inset>
        <van-cell title="单元格" is-link>
          <div slot="title" class="img">
            <img
              src="https://mall.s.maizuo.com/f6f787571eb0f43ca5db9bb4e3a3bb80.png"
              alt=""
            />
            <img
              src="https://mall.s.maizuo.com/f6f787571eb0f43ca5db9bb4e3a3bb80.png"
              alt=""
            />
          </div>
        </van-cell>
      </van-cell-group>
      <div class="box flex jc-e aic ">
        <span class="mr-15">共5件商品</span>
        <span class="mr-15">实付: 
          <span class="color">￥0.00</span>
        </span>
      </div>
      <div class="box flex jc-sb aic">
        <span>订单状态:已取消</span>
        <button class="mr-15 button">重新购买</button>
      </div>
    </div>
    <div>
      <van-cell-group inset>
        <van-cell title="单元格" is-link>
          <div slot="title" class="img">
            <img
              src="https://mall.s.maizuo.com/f6f787571eb0f43ca5db9bb4e3a3bb80.png"
              alt=""
            />
            <img
              src="https://mall.s.maizuo.com/f6f787571eb0f43ca5db9bb4e3a3bb80.png"
              alt=""
            />
          </div>
        </van-cell>
      </van-cell-group>
      <div class="box flex jc-e aic ">
        <span class="mr-15">共5件商品</span>
        <span class="mr-15">实付: 
          <span class="color">￥0.00</span>
        </span>
      </div>
      <div class="box flex jc-sb aic">
        <span>订单状态:已取消</span>
        <button class="mr-15 button">重新购买</button>
      </div>
    </div>
    <div>
      <van-cell-group inset>
        <van-cell title="单元格" is-link>
          <div slot="title" class="img">
            <img
              src="https://mall.s.maizuo.com/f6f787571eb0f43ca5db9bb4e3a3bb80.png"
              alt=""
            />
            <img
              src="https://mall.s.maizuo.com/f6f787571eb0f43ca5db9bb4e3a3bb80.png"
              alt=""
            />
          </div>
        </van-cell>
      </van-cell-group>
      <div class="box flex jc-e aic ">
        <span class="mr-15">共5件商品</span>
        <span class="mr-15">实付: 
          <span class="color">￥0.00</span>
        </span>
      </div>
      <div class="box flex jc-sb aic">
        <span>订单状态:已取消</span>
        <button class="mr-15 button">重新购买</button>
      </div>
    </div>
    <div>
      <van-cell-group inset>
        <van-cell title="单元格" is-link>
          <div slot="title" class="img">
            <img
              src="https://mall.s.maizuo.com/f6f787571eb0f43ca5db9bb4e3a3bb80.png"
              alt=""
            />
            <img
              src="https://mall.s.maizuo.com/f6f787571eb0f43ca5db9bb4e3a3bb80.png"
              alt=""
            />
          </div>
        </van-cell>
      </van-cell-group>
      <div class="box flex jc-e aic ">
        <span class="mr-15">共5件商品</span>
        <span class="mr-15">实付: 
          <span class="color">￥0.00</span>
        </span>
      </div>
      <div class="box flex jc-sb aic">
        <span>订单状态:已取消</span>
        <button class="mr-15 button">重新购买</button>
      </div>
    </div>

    <div></div>
  </div>
</template>


<script>
export default {
  methods: {},
};
</script>



<style lang="less" scoped>
.content-title {
  text-align: center;
  width: 100%;
  color: #797d82;
  background: #fff;
}
.content-title .zoom {
  border-bottom: 2px solid #c03131;
  line-height: 45px;
}
.img {
  width: 100px;
  line-height: 100px;
  display: flex;
  img {
    height: 80px;
    background: #999;
  }
}
.van-icon-arrow::before {
  padding-top: 26px;
}
.box{
  width: 100%;
  height: 50px;
  font-size: 14px;
  background: #fff;
  margin-top: 1px;
}
.button{
  line-height: 26px;
}
.color{
  color: #c03131;
}
</style>